<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body>



    <form class="layui-form layui-form-pane" action="">



        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">采购编号</label>
                <div class="layui-input-inline" style="width: 250px">
                    <input type="text" readonly id="id" name="id" th:value="${purchaseOrders.id}"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" >
                <label class="layui-form-label">审核状态</label>
                <div class="layui-input-inline" >
                    <input type="text" readonly name="statusString" th:value="${purchaseOrders.statusString}" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">采购门店</label>
                <div class="layui-input-inline">
                    <select name="merchantsId" id="merchantsId" disabled>
                        <option th:each="l : ${merchantsInformationList}" th:value="${l.id}" th:text="${l.name}" th:selected="${l.id == purchaseOrders.merchantsId}">无</option>

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">经办人员</label>
                <div class="layui-input-inline">
                    <input type="text" name="operator" th:value="${purchaseOrders.operator}" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" th:value="${purchaseOrders.remark}" autocomplete="off" placeholder="请输入备注" class="layui-input">
            </div>
        </div>


        <!--展示数据-->
        <div>

            <table class="layui-hide" id="purchaseOrders" lay-filter="purchaseOrders" ></table>

            <!--        表格右侧操作栏-->
            <script type="text/html" id="barDemo">
                <button class="layui-btn  layui-btn-sm layui-btn-primary" lay-event="del"><i class="layui-icon layui-icon-close"></i></button>
            </script>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">选择菜品原料</button>
                </div>
            </script>
        </div>




        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">制单人</label>
                <div class="layui-input-inline" style="width: 70px;">
                    <input type="text" readonly name="preparedBy" th:value="${purchaseOrders.preparedBy}"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">制单日期</label>
                <div class="layui-input-inline" style="width: 150px" >
                    <input type="text" readonly name="preparedDate" th:value="${purchaseOrders.preparedDate}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核人</label>
                <div class="layui-input-inline" style="width: 70px;">
                    <input type="text" readonly name="verifier" th:value="${purchaseOrders.verifier}"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核日期</label>
                <div class="layui-input-inline" style="width: 150px" >
                    <input type="text" readonly name="verifierDate" th:value="${purchaseOrders.verifierDate}" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="cancel" class="layui-btn ">取消</button>
                <button type="button" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>

            </div>
        </div>

    </form>


<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;



        //表格初始化
        table.render({
            elem: '#purchaseOrders'
            ,url:baseUrl+'purchase/orders/ordersList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 990
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,totalRow: true
            ,cols: [[
                {field:'materialId', width:80, title: '原料ID',hide:true}
                ,{field:'id', width:80, title: 'ID',hide:true}
                ,{field:'name', width:100, title: '原料名称' , totalRowText: '合计'}
                ,{field:'nowRepertory', width:100, title: '当前库存' }
                ,{field:'repertoryUnit', width:100, title: '库存单位' }
                ,{field:'purchaseUnit', width:100, title: '采购单位' }
                ,{field:'conversionName', width:100, title: '规格换算' }
                ,{field:'unitPrice', width:100, title: '采购进价' }
                ,{field:'purchaseNum', width:100, edit: 'text',title: '采购数量'}
                ,{field:'subtotalString', width:100, title: '小计' ,totalRow: true  }
                ,{field:'remark', width:100, title: '备注',edit:'text' }
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:75}
            ]]
            ,where: {
            id:$("#id").val(),


        } //设定异步数据接口的额外参数

    });




        //行工具栏事件
        table.on('tool(purchaseOrders)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){
                obj.del();
                $.ajax({
                    url:baseUrl+"purchase/orders/delMap",
                    data:{"id":data.id,"materialId":data.materialId},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){

                            table.reload('purchaseOrders', {
                                url: baseUrl+'purchase/orders/refresh'
                                ,where: {
                                    id:data.id
                                } //设定异步数据接口的额外参数

                            });
                        }else {
                            layer.open({
                                title: '删除菜品分类信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })
            }

        });

        //表头工具栏事件
        table.on('toolbar(purchaseOrders)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':

                    layer.open({
                        title: '编辑'
                        ,content: baseUrl+'purchase/orders/edit-chooseMaterial-ui?merchantsId='+$("#merchantsId").val()+'&orderId='+$("#id").val()
                        ,type:2
                        ,area: ['800px', '650px']
                        ,closeBtn:1
                        ,end:function () {
                            table.reload('purchaseOrders', {
                                url: baseUrl+'purchase/orders/refresh'
                                ,where: {
                                    id:$("#id").val()
                                } //设定异步数据接口的额外参数

                            });
                        }
                    })


                    break;


            };
        });





        //监听单元格编辑
        table.on('edit(purchaseOrders)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"purchase/orders/editMap",
                data:data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        if (field == "remark") {


                        }
                        if (field == "purchaseNum") {
                            table.reload('purchaseOrders', {
                                url: baseUrl+'purchase/orders/refresh'
                                ,where: {
                                   id:data.id
                                } //设定异步数据接口的额外参数

                            });
                        }

                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
        });





        //取消
        $("#cancel").click(function (){

        var  index = layer.confirm('确定要取消吗？取消后数据不会保存！', {
            btn: ['确定', '取消'] //可以无限个按钮
            , yes: function (index, layero) {

                layer.close(index)
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭

                //发送ajax请求  编辑APP信息
                $.ajax({
                    url:baseUrl+"purchase/orders/delAllMap",
                    data:{"id":$("#id").val()},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){

                        }else {
                            layer.open({
                                title: '编辑菜品信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })


            }
            , btn2: function (index, layero) {

            }
        });



        });




        //添加
        form.on('submit(sub)', function(data){


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"purchase/orders/saveMap",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        layer.open({
                            title: '修改采购单'
                            ,content: '修改成功！'
                            ,end:function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        });


                    }else {
                        layer.open({
                            title: '修改采购单失败！'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });








    });
</script>
<script>

</script>
</body>
</html>
